<template>
	<view>
		<view class="bgc-white p-l-25 p-r-25 w-750">
			<view class="d-flex-items-center b-b h-110 d-flex-between">
				<view class="d-flex-items-center">
					<view class="f-32 w-170">收货人</view>
					<input type="text" placeholder="收货人" class="f-32 w-200" v-model="info.contact_name">
				</view>
			</view>
			<view class="d-flex-items-center b-b h-110">
				<view class="f-32 w-170">联系电话</view>
				<view class="">
					<input type="text" placeholder="联系电话" class="f-32" v-model="info.contact_phone">
				</view>
			</view>
			<view class="d-flex-items-center d-flex-between b-b h-110">
				<view class="d-flex-items-center">
					<view class="f-32 w-170">所在地区</view>
					<view class="c-76 d-flex-items-center f-32" @click="pickShow = true">
						<text v-if="!info.province">请选择省市区县、乡镇</text>
						<text v-else class="c-33">{{info.province}}{{info.city}}{{info.district}}</text>
					</view>
				</view>
			</view>
			<view class="b-b p-t-30 p-b-30">
				<view class="bgc-f6f6f6 p-20">
					<u-input type="textarea" :border="false" :height="100" :auto-height="true"  placeholder="请输入详细地址：如道路、门牌号、小区、楼栋号等" v-model="info.detail_address"/>
				</view>
			</view>
			<view class="p-t-25 p-b-25 d-flex-items-center">
				<text class="m-r-25">是否设为默认地址</text> 
				<u-switch v-model="info.is_default"></u-switch>
			</view>
		</view>
		
		<view class="h-140 d-flex-items-center d-flex-end p-l-25 p-r-25" >
			<view class="btn-add w-700 lh-80 h-80 br-60 align-center c-white f-32"
				@click="save">
				确定
			</view>
		</view>
		<u-picker mode="region" v-model="pickShow" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				pickShow:false,
				info:{
					contact_name:"",
					contact_phone:"",
					province:"",
					city:"",
					district:"",
					detail_address:"",
					is_default:false
				},
				type:2
			}
		},
		onLoad(params){
			this.type = params.type
		},
		methods: {
			confirm(e){
				console.log(e)
				this.info.province = e.province.label
				this.info.city = e.city.label
				this.info.district = e.area.label
			},
			async save(){
				if(!this.info.contact_name) return this.$hint.desc('请输入收货人')
				if(!this.info.contact_phone) return this.$hint.desc('请输入联系电话')
				if(!this.info.province) return this.$hint.desc('请选择省市区')
				if(!this.info.detail_address) return this.$hint.desc('请输入详细地址')
				const res = await this.$service({
					url:"/api/member.user/addUserAddress",
					data:{
						...this.info
					}
				})
				console.log(res)
				this.$hint.desc(res.msg)
				if(res.code == 1){
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped>
	.bgc-f6f6f6{
		background:#f6f6f6;
	}
	.items{
		border:1px solid #e5e5e5;
		border-radius: 4px;
		color:#333;
	}
	.items-active{
		background: #383838 !important;
		color:#fff !important;
	}
	.add-btn-sty{
		background: #383838;
		border-radius: 33px;
		color:#fff;
	}
	.label-input-box{
		background: #F6F7F9;
		border-radius: 35px;
	}
	.btn-add{
		background: linear-gradient( 90deg, #FFEACB 0%, #E8BC77 100%);
	}
</style>